<template>
  <NavBarVue title="消息"/>
  <!-- 消息 公告 -->
  <view class="bulletin">
    <view class="title-list" style="padding-top: 40rpx;">
      <view class="title-list-item" v-for="(item) in titlelist" :key="item.id"
            :class="navIndex==item.id?'active':''" @click="tab(item.id)">
        {{item.name}}
        <view class="square"></view>
        <view class="redcir"></view>
      </view>
    </view>
    <!-- 公告 -->
    <view class="content" v-if="navIndex==2">
      <view class="notify announcement">
        <view style="font-weight: 600; font-size: 28rpx;">送你一份调研问卷</view>
        <view class="bullrig">
          <view
              style="width: 90rpx; height: 90rpx;overflow: hidden;background-color: #FE5C71;display: flex;align-items: center;justify-content: center;border-radius: 50%;">
            <up-icon name="volume" size="28" color="#fff"></up-icon>
          </view>
          <view style="margin-left: 15rpx;font-size: 24rpx;color: #999;">
            诚邀您参与小调研,有机会领取300优惠券
          </view>
        </view>
      </view>
    </view>
    <!-- 互动 -->
    <view class="content" v-if="navIndex==0">
      <view class="notify" v-for="(item) in initMsgData.selectUserData" :key="item.id">
        <view style="display: flex;align-items: center;">
          <view
              style="width: 90rpx; height: 90rpx;overflow: hidden;background-color: #FE5C71;display: flex;align-items: center;justify-content: center;border-radius: 50%;">
            <up-icon name="thumb-up" size="28" color="#fff" v-if="item.msgTitle.includes('点赞')"></up-icon>
            <up-icon name="star" size="28" color="#fff" v-else-if="item.msgTitle.includes('收藏')"></up-icon>
            <up-icon name="bell" size="28" color="#fff" v-else></up-icon>
          </view>
          <view style="margin-left:15rpx;font-size: 24rpx;color: #999;flex:1;overflow: hidden">
            <view style="font-size:28rpx; font-weight:600;">{{item.msgTitle}}</view>
            <view style="font-size:24rpx; color:#999;margin-top: 10rpx;">{{item.content}}</view>
          </view>
        </view>
        <view style="position: relative;overflow: hidden;">
          <view style="font-size:20rpx; color:#ccc;white-space: nowrap;">{{showDate(item)}}</view>
        </view>
      </view>
    </view>
    <!-- 活动 -->
    <view class="content" v-if="navIndex==1">
      <view class="notify" @click.stop="tonotification">
        <view style="display: flex;align-items: center;">
          <view
              style="width: 90rpx; height: 90rpx;background-color: #FE5C71;display: flex;align-items: center;justify-content: center;border-radius: 50%;">
            <up-icon name="bell" size="28" color="#fff"></up-icon>
          </view>
          <view style="margin-left:15rpx;font-size: 24rpx;color: #999;">
            <view style="font-size:28rpx; font-weight:600;">消息通知</view>
            <view style="font-size:24rpx; color:#999;margin-top: 10rpx;">点击查看最新活动</view>
          </view>
        </view>
        <view style="position: relative;">
          <view style="font-size:20rpx; color:#ccc;">{{'15分钟前'}}</view>
          <view class="bubble">{{initMsgData.selectUserData.length}}</view>
        </view>
      </view>
    </view>
  </view>
  <TabBarVue type="message"/>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  computed
} from 'vue';
import TabBarVue from '../../components/TabBar.vue';
import NavBarVue from '../../components/NavBar.vue';
import {
  useMessageStore,
  useShopStore,
  useUserStore
} from '../../store' //获取用户消息
import {
  onShow
} from '@dcloudio/uni-app'
import {formatActivityDate} from '@/utils/formatDate'

const {
  selectUserMessage,
  initMsgData
} = useMessageStore()

// const {shopLocation} = useShopStore()
const navIndex = ref(2)
//标题数据
const titlelist = reactive([{
  id: 2,
  name: "公告"
},
  {
    id: 0,
    name: "互动"
  },
  {
    id: 1,
    name: "活动"
  }
])


//切换-----------------
const tab = async (index) => {
  //记得写value
  navIndex.value = index
  await selectUserMessage({
    userId: userStore.userInfo.userInfos.id,
    type: navIndex.value
  });
}

const userStore = useUserStore()
const userId = ref(null)
// 渲染用的数据
onShow(async () => {
  await userStore.getUserDetail()
  await selectUserMessage({
    userId: userStore.userInfo.userInfos.id,
    type: navIndex.value
  });
})

let showDate = formatActivityDate()

const tonotification = () => {
  console.log(initMsgData, "tonotification");
  if (initMsgData.selectUserData.length) {
    uni.navigateTo({
      url: '/pages/tab-message/activity/show-infomation'
    })
  }
}
</script>

<style lang="scss" scoped>
.bulletin {
  width: 100vw;
  height: 100vh;
  background: #f6f6f6;
}

.title-list {
  width: 100vw;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  font-size: 28rpx;
  padding: 0rpx 40rpx;
  color: #666;
  z-index: 100;

  .title-list-item {
    width: auto;
    height: 40rpx;
    line-height: 40rpx;
    margin-right: 40rpx;
    position: relative;
  }
}

.active {
  color: #333;
  font-size: 36rpx;
  font-weight: 600;

  .square {
    width: 18rpx;
    height: 8rpx;
    border-radius: 4rpx;
    position: absolute;
    left: 30rpx;
    bottom: -15rpx;
    background: #333;
  }

  .redcir {
    width: 12rpx;
    height: 12rpx;
    background: #fe556b;
    border-radius: 6rpx;
    position: absolute;
    right: -15rpx;
    top: 0rpx;
  }
}

.conbull {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
}

.bullrig {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}

.bullnr {
  display: flex;
  font-size: 24rpx;
  color: #999;
}

.content {
  width: 100vw;
  box-sizing: border-box;
  padding: 0 14rpx;
  //通知
  .notify {
    color: #555;
    height: auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    border-radius: 10rpx;
    background: #fff;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    position: relative;
  }

  .announcement {
    flex-direction: column;
  }
}

.bubble {
  position: absolute;
  top: 40rpx;
  right: 3rpx;
  font-size: 20rpx;
  padding: 0rpx 8rpx;
  border-radius: 30rpx;
  font-weight: normal !important;
  color: white;
  background-color: rgb(255, 84, 106);
  height: 26rpx;
  line-height: 26rpx;
}
</style>